<template>
  <div class="main-content-container">
    <div ref="search" class="app-search">
      <el-row>
        <el-col :span="24" align="right" class="addBtnStyle">
          <el-button @click="addStore">+增加仓库</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="box-show" :style="'height:'+ (innerHeight + 80) + 'px'">
      <el-table v-loading="loading" class="mt10" :data="tableData" border :row-class-name="tableColor" :height="innerHeight">
        <el-table-column label="编号" prop="no" :show-overflow-tooltip="true" />
        <el-table-column label="名称" prop="name" :show-overflow-tooltip="true" />
        <el-table-column label="职能" prop="grant" :show-overflow-tooltip="true" />
        <el-table-column label="操作员" prop="operators" :show-overflow-tooltip="true" />
        <el-table-column label="状态" prop="status" :show-overflow-tooltip="true">
          <template slot-scope="{ row }">
            <span>{{ row.status }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" :show-overflow-tooltip="true">
          <template slot-scope="{ row }">
            <el-button type="text" @click="handleEdit(row)">编辑</el-button>
            <el-button type="text" :loading="buttonLoading" @click="handleDelete(row)">删除</el-button>
            <!-- <el-popconfirm title="确定删除吗？" @onConfirm="handleDelete(row)">
              <el-button slot="reference" :loading="buttonLoading" type="text">删除</el-button>
            </el-popconfirm> -->
          </template>
        </el-table-column>
      </el-table>
      <pagination :page-num="queryParams.page" :page-size="queryParams.pageSize" :on-change="handlePaginationChange" :total="total" />
    </div>
    <Dialog :visible.sync="visible" :reveal.sync="reveal" :current-row.sync="currentRow" @success="getList()" />
  </div>
</template>

<script>
import Dialog from "./dialog";
import { tableColor, labelHeigh } from '@/utils/common.js';
export default {
  components: { Dialog },
  data() {
    return {
      queryParams: {
        page: 1,
        pageSize: this.$store.state.commonsettings.maxPageSize,
      },
      total: 0,
      tableData: [],
      tableColor,
      innerHeight: null,
      loading: false,
      visible: false,
      reveal: false,
      buttonLoading: false,
      currentRow: {
        status: "启用",
      },
    };
  },
  mounted() {
    this.getList();
    this.innerHeight = labelHeigh(this.$refs.search);
  },
  methods: {
    getList() {
      this.$api['data/storehouse/list']({
        ...this.queryParams,
      }).then(res => {
        if (res.code !== 200) return;
        this.tableData = res.data.result;
        this.total = res.data.total;
      });
    },
    handlePaginationChange(pagination) {
      this.queryParams = { page: pagination.pageNum, pageSize: pagination.pageSize };
      this.getList();
    },
    async handleEdit(row) {
      console.log(row.id, '669');
      this.visible = true;
      const res = await this.$api['data/storehouse/editWarehouse']({ id: row.id });
      if (res.code === 200) {
        this.currentRow = res.data;
      }
      console.log(this.currentRow, 'this.currentRow');
      // this.currentRow = JSON.parse(JSON.stringify(row));
    },
    async handleDelete(row) {
      const confirmResult = await this.$confirm('请确认是否删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).catch((err) => err);
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除');
      }
      this.buttonLoading = true;
      this.$api[`data/storehouse/delete`]({ id: row.id }).then(res => {
        if (res.code !== 200) return;
        this.msgSuccess('删除成功');
        this.getList();
      }).finally(() => (this.buttonLoading = false));
    },
    addStore() {
      this.visible = true;
    },
  },
};
</script>
<style lang="scss" scoped>
.box-show{
  margin-top: 12px;
}
/deep/ .pagination-container{
  margin-top: 10px !important;
}
</style>
